<template>
  <div class="maintain">
    <span class="title">供应商信息维护</span>
    <div class="content">
      <div class="content_tabs">
        <div :class="chooseTabsIndex == index?'tab chooseTab':'tab'" @click="chooseTabs(index)" v-for="(item,index) in proList">{{item}}</div>
        <div :class="chooseTabsIndex == 'parts'?'tab chooseTab':'tab'" @click="chooseTabs('parts')">配件</div>
        <div :class="chooseTabsIndex == 'delivery'?'tab chooseTab':'tab'" @click="chooseTabs('delivery')">外购直送件</div>
      </div>
      <div class="content_con">
        <div class="row titleRow">
          <div class="col">序号</div>
          <div class="col">零件号</div>
          <div class="col col2">零件名称</div>
          <div class="col">供应商</div>
          <div class="col">单车用量</div>
          <div class="col">单包数量</div>
          <div class="col">最低安全库存</div>
          <div class="col">到货时间</div>
          <div class="col">提前期(天)</div>
        </div>
        <div class="row" v-for="(item,index) in dataList">
          <div class="col">{{item.id}}</div>
          <div class="col">{{item.product}}</div>
          <div class="col col2">{{item.name}}</div>
          <div class="col">{{item.supplierName}}</div>
          <div class="col">{{item.quantity1}}</div>
          <div class="col"><el-input @focus="upstateData(1,item.quantity2,item)" v-model="item.quantity2" placeholder="请输入单包数量" :disabled="!canOperation"></el-input></div>
          <div class="col"><el-input @focus="upstateData(2,item.quantity3,item)" v-model="item.quantity3" placeholder="请输入最低安全库存" :disabled="!canOperation"></el-input></div>
          <div class="col"><input @focus="upstateData(3,item.frequency,item)" class="frequency" type="text" :value="encapsulationData(item.frequency)" :disabled="!canOperation" /></div>
          <div class="col"><el-input @focus="upstateData(4,item.leadTime,item)" v-model="item.leadTime" placeholder="请输入提前期" :disabled="!canOperation"></el-input></div>
        </div>
      </div>
    </div>
    <div class="bc" v-if="showMainTainPlant"></div>
    <plant v-if="showMainTainPlant" :mtpPar="mtpPar" @getBack="getBack"></plant>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import plant from '../upstates/mainTainPlant'
  import qs from 'qs'
  export default {
    name: "maintain",
    data() {
      return {
        proList:[], //产品类型列表
        canOperation: false, //判断身份是否可以操作
        chooseTabsIndex: '', //选择的选项卡
        dataList: [], //数据列表
        mtpPar:[], //组件参数
      }
    },
    computed:{
      ...mapGetters(['productList','showMainTainPlant'])
    },
    components:{
      plant
    },
    created() {
      let self = this
      let authoritiesList = JSON.parse(localStorage.getItem('authoritiesList'))
      for (let i = 0; i < authoritiesList.length; i++){
        if (authoritiesList[i] == 'ROLE_CHECK'){
          self.canOperation = true
        }
      }
    },
    mounted() {
      let self = this
      let list = []
      for (let i = 0; i < self.productList.length; i++){
        if (i > 0){
          list.push(self.productList[i])
        }
      }
      self.proList = list
      self.getMeterParam(self.proList[0])
    },
    methods: {
      ...mapActions(['upstate']),
      //选择选项卡
      chooseTabs(index){
        let self = this
        self.chooseTabsIndex = index
        if (self.chooseTabsIndex == 'parts') { //查询配件
          self.getMeterParam('parts')
        } else if (self.chooseTabsIndex == 'delivery') { //查询外购直送件
          self.getMeterParam('outsour')
        } else { //查询产品
          self.getMeterParam(self.proList[index])
        }
      },
      //查询数据
      getMeterParam(par){
        let self = this
        let params = {type:par}
        self.$http.get(self.conURL + 'pm/api/material_param?' + qs.stringify(params)).then(res => {
          self.dataList = res.data
        })
      },
      //修改数据
      upstateData(type,par,item){
        let self = this
        if (self.canOperation){
          self.mtpPar = {
            type: type,
            par: par,
            item: item
          }
          self.upstate({key:'showMainTainPlant',val:true})
        }
      },
      //数据封装
      encapsulationData(list){
        let self = this
        let newList = ''
        for (let i = 0; i < list.length; i++){
          switch (list[i]) {
            case '1':
              newList += '每周一,'
              break;
            case '2':
              newList += '每周二,'
              break;
            case '3':
              newList += '每周三,'
              break;
            case '4':
              newList += '每周四,'
              break;
            case '5':
              newList += '每周五,'
              break;
            case '6':
              newList += '每周六,'
              break;
            case '7':
              newList += '每周日,'
              break;
          }
        }
        return newList.substring(0,newList.length - 1)
      },
      //组件返回值
      getBack(par){
        let self = this
        if (par){
          if (self.chooseTabsIndex == ''){
            self.getMeterParam(self.proList[0])
          } else if (self.chooseTabsIndex == 'parts') { //查询配件
            self.getMeterParam('parts')
          } else if (self.chooseTabsIndex == 'delivery') { //查询外购直送件
            self.getMeterParam('outsour')
          } else { //查询产品
            self.getMeterParam(self.proList[self.chooseTabsIndex])
          }
        }
        self.upstate({key:'showMainTainPlant',val:false})
      }
    }
  }
</script>

<style lang="less">
  .maintain{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px;
    padding-top: 0;
    box-sizing: border-box;
    .title{
      font-size: 20px;
      color: #333333;
    }
    .content{
      display: flex;
      flex-direction: column;
      width: 100%;
      .content_tabs{
        display: flex;
        flex-direction: row;
        .tab{
          width: 114px;
          height: 38px;
          line-height: 38px;
          text-align: center;
          border: 1px solid #e2e2e2;
          border-right: none;
          color: #666666;
          font-size: 16px;
          background: #fafafa;
          cursor: pointer;
        }
        .tab:last-child{
          border-right: 1px solid #e2e2e2;
        }
        .chooseTab{
          color: #222222;
          background: #fff;
          position: relative;
        }
        .chooseTab:after{
          content: '';
          display: block;
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 1px;
          background: #fff;
        }
      }
      .content_con{
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        padding: 20px 0;
        box-sizing: border-box;
        .row{
          width: 100%;
          display: flex;
          flex-direction: row;
          border-top: 1px solid #e5e5e5;
          .col{
            width: 9.5%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 14px;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .frequency{
              -webkit-appearance: none;
              background-color: #fff;
              background-image: none;
              border-radius: 4px;
              border: 1px solid #dcdfe6;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              color: #606266;
              display: inline-block;
              font-size: inherit;
              height: 40px;
              line-height: 40px;
              outline: 0;
              padding: 0 7px;
              -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
              transition: border-color .2s cubic-bezier(.645,.045,.355,1);
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .el-input{
              width: 60%;
              margin: auto;
              border-radius: 5px;
              text-indent: .5rem;
              height: 30px;
              display: inline-block;
            }
          }
          .col2{
            width: 15%;
          }
        }
        .row:last-child{
          border-bottom: 1px solid #e5e5e5;
        }
        .titleRow{
          background: #fafafa;
          .col{
            height: 37px;
            line-height: 37px;
          }
        }
      }
    }
    .bc{
      width: 100%;
      height: 100%;
      z-index: 9;
      background: #000;
      opacity: 0.3;
      position: fixed;
      left: 0;
      top: 0;
    }
  }
</style>
